<template>
    <div class="p-2">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleTabClick">
            <el-tab-pane v-for="item in typeAllList" :key="item.id" :label="item.customized_name"
                :name="item.id"></el-tab-pane>
        </el-tabs>

        <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
            :leave-active-class="proxy?.animate.searchAnimate.leave">
            <div class="search">
                <el-form ref="queryFormRef" :model="queryParams" :inline="true">
                    <el-form-item label="制单日期：" prop="timeDate">
                        <el-date-picker v-model="queryParams.timeDate" type="daterange" range-separator="至"
                            start-placeholder="开始时间" end-placeholder="结束时间" @change="handleTimeChange"
                            format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                    </el-form-item>
                    <el-form-item label="客户：" prop="customerName">
                        <el-input v-model="queryParams.customerName" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="制单人：" prop="creator">
                        <el-input v-model="queryParams.creator" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="入库状态：" prop="inStatus">
                        <el-select v-model="queryParams.inStatus" clearable>
                            <el-option label="未入库" value="0"></el-option>
                            <el-option label="部分入库" value="1"></el-option>
                            <el-option label="已入库" value="2"></el-option>
                            <el-option label="超时未发" value="3"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="工单打印：" prop="orderPrintStatus">
                        <el-select v-model="queryParams.orderPrintStatus" clearable>
                            <el-option label="未打印" value="0"></el-option>
                            <el-option label="已打印" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="Search" @click="handleQuery">查询</el-button>
                        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </transition>

        <el-card shadow="never">
            <template #header>
                <div class="mb2" style="text-align: center;font-size: 18px;"><strong>当前餐具盒订单总量：{{ total }}</strong>
                </div>
            </template>
            <el-table ref="multipleTableRef" v-loading="loading" :data="packageOrderList" stripe>
                <el-table-column label="产品类别" prop="productType" align="center"></el-table-column>
                <el-table-column label="制单员" prop="createByName" align="center"></el-table-column>
                <el-table-column label="设计师" prop="designer" align="center"></el-table-column>
                <el-table-column label="制单日期" prop="createTime" align="center"></el-table-column>
                <el-table-column label="生产单号" prop="produceOrderCode" align="center"></el-table-column>
                <el-table-column label="客户名称" prop="customerName" align="center"></el-table-column>
                <el-table-column label="旺旺名称" prop="wwName" align="center"></el-table-column>
                <el-table-column label="配件名称" prop="specsDetail" align="center"></el-table-column>
                <el-table-column label="订单编号" prop="orderId" align="center"></el-table-column>
                <el-table-column label="生产数量" prop="number" align="center"></el-table-column>
                <el-table-column label="备注" prop="remark" align="center"></el-table-column>
                <el-table-column label="烫金版状态" align="center">
                    <template #default="scope">
                        <span class="alert" v-if="scope.row.hotStampingFlag == '0'">未就绪</span>
                        <span class="normal" v-if="scope.row.hotStampingFlag == '1'"> 已就绪</span>
                        <span class="primary" v-if="scope.row.hotStampingFlag == '-1'"> 无烫金工序</span>
                    </template>
                </el-table-column>
                <el-table-column label="工单打印" align="center">
                    <template #default="scope">
                        <span class="alert" v-if="scope.row.orderPrintStatus == '0'">未打印</span>
                        <span class="normal" v-if="scope.row.orderPrintStatus == '1'"> 已打印</span>
                    </template>
                </el-table-column>
                <el-table-column label="标签打印" align="center">
                    <template #default="scope">
                        <span class="alert" v-if="scope.row.labelPrintStatus == '0'">未打印</span>
                        <span class="normal" v-if="scope.row.labelPrintStatus == '1'"> 已打印</span>
                    </template>
                </el-table-column>
                <el-table-column label="入库状态" align="center">
                    <template #default="scope">
                        <span class="alert" v-if="scope.row.inStatus == '0'">未入库</span>
                        <span class="primary" v-if="scope.row.inStatus == '1'"> 部分入库</span>
                        <span class="normal" v-if="scope.row.inStatus == '2'"> 已入库</span>
                        <span class="warning" v-if="scope.row.inStatus == '3'"> 超时未发</span>
                    </template>
                </el-table-column>
                <el-table-column label="交货日期" align="center" prop="deliveryDate"></el-table-column>
                <el-table-column label="操作" fixed="right" align="center" width="220px">
                    <template #default="scope">
                        <el-tooltip content="编辑" placement="top">
                            <el-button @click="handlOpenEditDetails(scope.row)" link :style="{ fontSize: '15px' }"
                                type="primary" icon="EditPen"></el-button>
                        </el-tooltip>
                        <el-tooltip content="删除">
                            <el-button link @click="handleDelete(scope.row)" :style="{ fontSize: '15px' }" type="danger"
                                icon="Close"></el-button>
                        </el-tooltip>
                        <el-tooltip content="打印标签">
                            <el-button @click="handlePrint(scope.row)" link :style="{ fontSize: '15px' }" type="danger"
                                icon="Printer"></el-button>
                        </el-tooltip>
                        <el-tooltip content="详情">
                            <el-button link @click="handlOpenDetails(scope.row)" :style="{ fontSize: '15px' }"
                                type="success" icon="Tickets"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>

            </el-table>
            <pagination v-show="totalData > 0" :total="totalData" v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize" @pagination="getDesignerList" />
        </el-card>

        <editDialog :visible="editDialogVisible" :initList="editObj" @submit="editDialogVisible = false"
            @close="handlOpenEditDetailsClose">
        </editDialog>

        <workOrderDetail :visible="detailVisible" :initList="detailObj" @close="handlOpenDetailsClose" />

        <printLabel :visible="printVisible" :initList="printObj"></printLabel>
    </div>
</template>
<script setup lang="ts">
import { type FormInstance, TableInstance, TabsPaneContext } from 'element-plus';
import { getListApi, getAllTypeApi, deleteOrderApi } from '@/api/sj/productManagement/integratedProduction/index';

import editDialog from './components/editDialog.vue';
import workOrderDetail from './components/workOrderDetail.vue';
import printLabel from './components/printLabel.vue';

/** 详情 */
import useWorkOrderDetail from '@/hooks/productManagement/integratedProduction/useWorkOrderDetail';

/** 编辑详情 */
import useEditDialog from '@/hooks/productManagement/integratedProduction/useEditDialog';
const { editDialogVisible, editObj, handlOpenEditDetails, handlOpenEditDetailsClose } = useEditDialog();
const { detailVisible, detailObj, handlOpenDetails, handlOpenDetailsClose } = useWorkOrderDetail();

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { customized_order_type, personal_ratio } = toRefs<any>(proxy?.useDict('customized_order_type', 'personal_ratio'));
const queryFormRef = ref<FormInstance>();
const multipleTableRef = ref<TableInstance>()


const data = reactive<pageDataOnlyQuery<any>>({
    queryParams: {
        customerName: '',
        creator: '',
        inStatus: '',
        orderPrintStatus: '',
        timeDate: '',
        startDate: '',
        endDate: '',
        pageSize: 10,
        pageNum: 1
    }
});

const activeName = ref('');
const { queryParams } = toRefs(data);
const packageOrderList = ref<any[]>();
const totalData = ref(0);
const loading = ref(false);
const printVisible = ref(false);
const printObj = ref<any>();

const typeAllList = ref<any[]>();
const total = ref(0);

/** 打印标签 */
const handlePrint = async (row: any) => {
    printObj.value = row;
    printVisible.value = true;
};


const handleTabClick = (tab: TabsPaneContext, event: Event) => {
    let list = typeAllList.value?.filter((item: any) => item.customized_name == tab.props.label)[0];
    queryParams.value.customizedTypeId = list.id;
    getDesignerList();
};

/** 搜索按钮操作 */
const handleQuery = () => {
    queryParams.value.pageNum = 1;
    getDesignerList()
};

/** 日期选择 */
const handleTimeChange = (val: any) => {
    queryParams.value.startDate = val[0];
    queryParams.value.endDate = val[1];
};

const resetQuery = () => {
    queryFormRef.value?.resetFields();
    queryParams.value.startDate = undefined;
    queryParams.value.endDate = undefined;
    queryParams.value.timeDate = '';
    handleQuery();
};

const getDesignerList = async () => {
    loading.value = true;
    try {
        const { data } = await getListApi(queryParams.value);
        total.value = data.total;
        packageOrderList.value = data.dataPage.records
        loading.value = false;
    } catch (error) {
        loading.value = false;
    }
};

/** 删除按钮操作 */
const handleDelete = (row: any) => {
    ElMessageBox.confirm('是否确认删除配件名称为"' + row.specsDetail + '"的数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(async () => {
            const { code } = await deleteOrderApi(row.id);
            if (code === 200) {
                proxy?.$modal.msgSuccess('删除成功');
                getDesignerList()
            }

        })
}


/** 获取全部定制类型 */
const getAllType = async () => {
    try {
        const { data } = await getAllTypeApi();
        activeName.value = data[0].id
        queryParams.value.customizedTypeId = data[0].id

        typeAllList.value = data
        getDesignerList()
    } catch (error) {

    }
}


onMounted(() => {
    getAllType()
});

</script>
<style lang="scss" scoped></style>